<template>
  <view class="page">
    <view class="box">
      <view class="li flex-between align-center" v-if="user.phone">
        <text class="key">手机号</text>
        <text class="value">{{ user.phone }}</text>
      </view>
      <view class="li flex-between align-center" v-else @click="show20 = true">
        <text class="key">绑定手机号</text>
        <image
          src="../../static/more.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </view>
      <view class="li flex-between align-center">
        <text class="key"> 版本号 </text>
        <text>V1.2.4</text>
       </view>
    </view>
    <view class="botVue">
      <view class="btn margin0" @click="show = true">退出登录</view>
    </view>

    <u-popup v-model="show20" mode="center" border-radius="12">
      <view class="popVue">
        <view class="title text-center">绑定手机号</view>
        <view class="inpVue">
          <view class="label">手机号</view>
          <view class="flex">
            <input type="number" v-model="name" placeholder="请输入手机号" />
          </view>
        </view>
        <view class="inpVue margin50">
          <view class="label">验证码</view>
          <view class="flex align-center">
            <input type="number" v-model="code" placeholder="请输入验证码" />
            <view class="code" @click="sendCode()">{{ text }}</view>
          </view>
        </view>
        <view class="loginBtn margin40" @click="bandFun()">确认</view>
      </view>
    </u-popup>

    <!-- 退出登录 -->
    <u-modal
      v-model="show"
      content="确认退出登录？"
      confirm-color="#FFA0A0"
      :show-cancel-button="true"
      @confirm="logoutFun"
    ></u-modal>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			show: false,
			show20: false,
			code: "",
			text: "获取验证码",
			isSend: false,
			name: "",
		};
	},
	computed: {
		...mapState({
			user: (state) => state.user,
		}),
	},
 
	methods: {
		async bandFun() {
			if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号");
			if (!this.code) return this.$u.toast("请输入验证码");
			const res = await this.$request("/aiet-user-center/user/bindPhone", {
				phone: this.name,
				code: this.code,
				companyId: 2
			});
			if (res.code === 200) {
				this.show20 = false;
				this.name = "";
				this.code = "";
				this.$u.toast("绑定成功");
				uni.setStorageSync("ai-token", res.data.token);
				this.$store.state.isLogin = true;
				this.$store.state.user = res.data.user;
			} else {
				this.$u.toast(res.msg);
			}
		},

		// 退出登录
		async logoutFun() {
			uni.showLoading();
			const res = await this.$request("/aiet-user-center/user/logout");
			if (res.code === 200) {
				uni.hideLoading();
				this.$u.toast("退出成功");
				uni.removeStorageSync("ai-token");
				this.$store.state.isLogin = false;
				this.$store.state.user = {};
				setTimeout(() => {
					uni.switchTab({
						url: "../index/index",
					});
				}, 1000);
			} else {
				uni.hideLoading();
				this.$u.toast(res.msg);
			}
		},

		// 发送验证码
		async sendCode() {
			if (!this.$u.test.mobile(this.name)) return this.$u.toast("请输入正确手机号");
			if (this.isSend) return;
			this.isSend = true;
			uni.showLoading();
			try {
				const res = await this.$request("/aiet-user-center/user/sendCode", {phone: this.name});
				if (res.code === 200) {
					uni.hideLoading();
					this.$u.toast("发送成功");
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = "获取验证码";
							this.isSend = false;
						}
					}, 1000);
				} else {
					uni.hideLoading();
					this.$u.toast(res.msg);
					this.isSend = false;
				}
			} catch (error) {
			uni.hideLoading();
				console.log("调用接口失败", error);
				this.$u.toast(error.msg);
				this.isSend = false;
			} finally {
				uni.hideLoading();
			}
		},
	},
};
</script>

<style lang="less" scoped>
.popVue {
  width: 690rpx;
  padding: 30rpx;
  .title {
    font-weight: 600;
    color: #000;
  }
  .loginBtn {
    width: 100%;
    height: 88rpx;
    background: #FFA0A0;
    border-radius: 44rpx;
    color: #fff;
    line-height: 88rpx;
    text-align: center;
    font-size: 30rpx;
  }
  .inpVue {
    width: 100%;
    .label {
      color: #808080;
    }
    input {
      flex: 1;
      height: 88rpx;
      border-radius: 12rpx;
      border: 1rpx solid #ececec;
      padding-left: 30rpx;
      display: block;
      margin-top: 15rpx;
      color: #000;
    }
    .code {
      width: 200rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      margin-top: 15rpx;
      margin-left: 20rpx;
      border-radius: 12rpx;
      background: #f5f5f5;
      color: #fff;
      background: #FFA0A0;
    }
  }
}
.box {
  width: 100%;
  background: #fff;
  .li {
    width: 100%;
    height: 120rpx;
    border-bottom: 1rpx solid #f5f5f5;
    padding: 0 30rpx;
    .key {
      color: #000;
      font-weight: 600;
    }
    .value {
      color: #a3acad;
    }
  }
}
.botVue {
  width: 750rpx;
  position: fixed;
  left: 0;
  bottom: 80rpx;
  text {
    color: #888;
    line-height: 1;
  }
  .btn {
    width: 690rpx;
    height: 88rpx;
    background: #FFA0A0;
    border-radius: 12rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
  }
}
</style>
